<template>
	<view>
		<login-ways @change="changeLogin" :value="loginWayName"></login-ways>
		<!-- 游客登录 -->
		<uv-button text="游客登录" :loading="visitorBtnLoading" @click="visitorLogin(redirectTo)"></uv-button>
		<!-- 手机号登录 -->
		<template v-if="loginWayName == 'mobile'">
			<uv-form label-width="60px" labelPosition="left" :model="mobileLoginFormData" :rules="mobileLoginRules" ref="mobileLoginForm">
				<uv-form-item label="手机号" prop="mobile" borderBottom key="m1">
					<uv-input v-model="mobileLoginFormData.mobile"></uv-input>
				</uv-form-item>
				<uv-form-item label="验证码" prop="code" borderBottom key="m2" v-if="showCodeInput">
					<uv-input v-model="mobileLoginFormData.code">
						<template v-slot:suffix>
							<uv-text :text="codeBtnText" color="#999" style="cursor: pointer;" @click="getCode(mobileCode)"></uv-text>
						</template>
					</uv-input>
				</uv-form-item>
				<uv-button type="primary" :loading="mobileBtnLoading" loading-text="登录中" text="登录" customStyle="margin-top: 10px" @click="mobileLoginSubmit(mobileLoginForm,mobileCode,redirectTo)"></uv-button>
			</uv-form>
		</template>
		<!-- 账号密码登录 -->
		<template v-else-if="loginWayName == 'account'">
			<uv-form label-width="60px" labelPosition="left" :model="accountLoginFormData" :rules="accountLoginRules" ref="accountLoginForm">
				<uv-form-item label="账号" prop="username" borderBottom key="a1">
					<uv-input v-model="accountLoginFormData.username" placeholder="输入用户名"></uv-input>
				</uv-form-item>
				<uv-form-item label="密码" prop="password" borderBottom key="a2">
					<uv-input type="password" v-model="accountLoginFormData.password" placeholder="输入密码"></uv-input>
				</uv-form-item>
				<uv-form-item label="密码2" prop="passwordAgain" borderBottom key="a3" v-if="showCreateAccount">
					<uv-input type="password" v-model="accountLoginFormData.passwordAgain" placeholder="再次输入密码"></uv-input>
				</uv-form-item>
				<uv-button type="primary" :loading="accountBtnLoading" loading-text="创建账号中" text="新建账号" customStyle="margin-top: 10px" @click="accountLoginSubmit(accountLoginForm,redirectTo,captchaPopup)" v-if="showCreateAccount"></uv-button>
				<uv-button type="primary" :loading="accountBtnLoading" loading-text="登录中" text="登录" customStyle="margin-top: 10px" @click="accountLoginSubmit(accountLoginForm,redirectTo,captchaPopup)" v-else></uv-button>
				<view class="tip" v-if="!showCreateAccount" @click="changeShowCreate(true)">没有账号？点击这里创建</view>
				<view class="tip" v-else @click="changeShowCreate(false)">已有账号，立即登录</view>
			</uv-form>
		</template>
		<!-- 倒计时 -->
		<uv-code ref="mobileCode" keep-running :seconds="seconds" @end="end" @start="start" @change="codeChange"></uv-code>
		<!-- <uni-popup-captcha @confirm="accountLoginSubmit(accountLoginForm,redirectTo,captchaPopup)" v-model="accountLoginFormData.captcha" scene="login-by-sms" ref="captchaPopup"></uni-popup-captcha> -->
		<captcha-popup ref="captchaRef" v-if="captcha.scene" v-model="captcha.value" :scene="captcha.scene" @confirm="captcha.callback(captcha.value)"></captcha-popup>
	</view>
</template>
<script setup>
	import { defineComponent, nextTick, reactive, ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import loginWays from './components/login-ways.vue';
	import useMobileLogin from './hooks/useMobileLogin.js';
	import useAccountLogin from './hooks/useAccountLogin.js';
	import useVisitorLogin from './hooks/useVisitorLogin.js';
	import useLoginAfter from './hooks/useLoginAfter.js';
	defineComponent({ loginWays });
	onShow(() => {
		redirectTo();
	})

	const captchaRef = ref(null);
	const loginWayName = ref('mobile');
	const mobileLoginForm = ref(null);
	const accountLoginForm = ref(null);
	// const captchaPopup = ref(null);
	const mobileCode = ref(null);
	uni.$on('captcha-popup-valid', ({ scene, callback } = {}) => {
		captcha.scene = scene;
		captcha.callback = callback;
		nextTick(()=>{
			console.log(captchaRef.value)
			captchaRef.value.open();
		})
	})
	const captcha = reactive({
		value: '',
		scene: '',
		callback: () => {}
	})
	const { visitorLogin, visitorBtnLoading } = useVisitorLogin();
	const { showCodeInput, mobileLoginFormData, mobileLoginRules, mobileLoginSubmit, getCode, seconds, start, end, codeChange, codeBtnText, mobileBtnLoading } = useMobileLogin();
	const { showCreateAccount, accountLoginFormData, accountLoginRules, accountLoginSubmit, changeShowCreate, accountBtnLoading } = useAccountLogin();
	const { redirectTo } = useLoginAfter();

	function changeLogin(name) {
		loginWayName.value = name;
	}
</script>
<style scoped>
</style>